<template>
  <div class="home">
<!--      <AboutAside class="leftAside"></AboutAside>-->

      <section class="rightContent">
          <HomeHeader></HomeHeader>
          <section class="content">
              <ListDataAside></ListDataAside>
              <MediaNav class="mediaNav"></MediaNav>
              <IconContent class="iconContent"></IconContent>
              <div class="draws">
                  <div ref="main" class="draw"></div>
                  <div ref="main2" class="draw"></div>
                  <Pie class="draw" :inewsData = data></Pie>
                  <Cloud class="draw" :cloudInewsData = cloudData></Cloud>
                  <StackBarChart class="draw" style="width: 100%"></StackBarChart>
                  <FoldingColumnMixing :FoldingData="FoldingData" class="draw" style="width: 100%"></FoldingColumnMixing>
                  <ChinaMap :chinaData="chinaData"></ChinaMap>
              </div>
          </section>

      </section>

  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import * as echarts from 'echarts5';
import Pie from "../components/Pie";
import Cloud from "../components/Cloud";
// import AboutAside from "../components/AboutAside";
import HomeHeader from "../components/Home/HomeHeader";
import ListDataAside from "../components/Home/ListDataAside";
import MediaNav from "../components/Home/MediaNav";
import IconContent from "../components/Home/IconContent";
import StackBarChart from "../components/StackBarChart";
import FoldingColumnMixing from "../components/FoldingColumnMixing";
import ChinaMap from "../components/ChinaMap";
export default {
  name: 'Home',
  components: {
    // HelloWorld
      Pie,
      Cloud,
      // AboutAside,
      MediaNav,
      HomeHeader,
      ListDataAside,
      IconContent,
      StackBarChart,
      FoldingColumnMixing,
      ChinaMap

  },
  data() {
    return {
        chinaData:[
            {name: '南海诸岛', value: 0},
            {name: '北京', value: 2170.7},
            {name: '天津', value: 1559.6},
            {name: '上海', value: 2423.78},
            {name: '重庆', value: 3048.43},
            {name: '河北', value: 7556.3},
            {name: '河南', value: 9605},
            {name: '云南', value: 4800.5},
            {name: '辽宁', value: 4359.3},
            {name: '黑龙江', value: 3788.7},
            {name: '湖南', value: 6860.2},
            {name: '安徽', value: 6323.6},
            {name: '山东', value: 10047.2},
            {name: '新疆', value: 2444.67},
            {name: '江苏', value: 8029.3},
            {name: '浙江', value: 5737},
            {name: '江西', value: 4622.1},
            {name: '湖北', value: 5917},
            {name: '广西', value: 4885},
            {name: '甘肃', value: 2625.71},
            {name: '山西', value: 3702.35},
            {name: '内蒙古', value: 2534},
            {name: '陕西', value: 3835.44},
            {name: '吉林', value: 2717.43},
            {name: '福建', value: 3941},
            {name: '贵州', value: 3580},
            {name: '广东', value: 11346},
            {name: '青海', value: 3983.8},
            {name: '西藏', value: 3371.5},
            {name: '四川', value: 8341},
            {name: '宁夏', value: 681.79},
            {name: '海南', value: 925.76},
            {name: '台湾', value: 2369},
            {name: '香港', value: 748.25},
            {name: '澳门', value: 63.2}
        ],
        FoldingData:[
            {
                name:"其他",
                negative:19505,
                neuter:8305,
                front:3672,
            },
      {
          name:"北京",
              negative:1950,
          neuter:8305,
          front:3672,
      },
      {
          name:"广东省",
              negative:19505,
          neuter:805,
          front:367
      },
      {
          name:"上海",
              negative:19505,
          neuter:8305,
          front:372
      },
      {
          name:"浙江",
              negative:1505,
          neuter:830,
          front:367
      },
      {
          name:"山东",
              negative:9505,
          neuter:8305,
          front:372
      },
      {
          name:"江苏",
              negative:1905,
          neuter:8305,
          front:672
      },
      {
          name:"四川",
              negative:9505,
          neuter:805,
          front:367
      },
      {
          name:"其他",
              negative:19505,
          neuter:8305,
          front:3672
      },
      {
          name:"北京",
              negative:1950,
          neuter:8305,
          front:3672
      },
      {
          name:"广东省",
              negative:19505,
          neuter:805,
          front:3672
      },
      {
          name:"上海",
              negative:19505,
          neuter:8305,
          front:372
      },
      {
          name:"浙江",
              negative:1505,
          neuter:830,
          front:367
      },
      {
          name:"山东",
              negative:9505,
          neuter:8305,
          front:372
      },
      {
          name:"江苏",
              negative:1905,
          neuter:8305,
          front:672
      },
      {
          name:"四川",
              negative:9505,
          neuter:805,
          front:367
      },
      {
          name:"其他",
              negative:19505,
          neuter:8305,
          front:3672
      },
      {
          name:"北京",
              negative:1950,
          neuter:8305,
          front:3672
      },
      {
          name:"广东省",
              negative:19505,
          neuter:805,
          front:3672
      },
      {
          name:"上海",
              negative:19505,
          neuter:8305,
          front:372
      },
      {
          name:"浙江",
              negative:1505,
          neuter:830,
          front:367
      },
      {
          name:"山东",
              negative:9505,
          neuter:8305,
          front:372
      },
      {
          name:"江苏",
              negative:1905,
          neuter:8305,
          front:672
      },
      {
          name:"四川",
              negative:9505,
          neuter:805,
          front:367
      },
      {
          name:"其他",
              negative:19505,
          neuter:8305,
          front:3672
      },
      {
          name:"北京",
              negative:1950,
          neuter:8305,
          front:3672
      },
      {
          name:"广东省",
              negative:19505,
          neuter:805,
          front:3672
      },
      {
          name:"上海",
              negative:19505,
          neuter:8305,
          front:372
      },
      {
          name:"浙江",
              negative:1505,
          neuter:830,
          front:367
      },
      {
          name:"山东",
              negative:9505,
          neuter:8305,
          front:372
      },
      {
          name:"江苏",
              negative:1905,
          neuter:8305,
          front:672
      },
      {
          name:"四川",
              negative:9505,
          neuter:805,
          front:367
      },
      {
          name:"其他",
              negative:19505,
          neuter:8305,
          front:3672
      },
      {
          name:"北京",
              negative:1950,
          neuter:8305,
          front:3672
      },
      {
          name:"广东省",
              negative:19505,
          neuter:805,
          front:3672
      },
      {
          name:"上海",
              negative:19505,
          neuter:8305,
          front:372
      },
      {
          name:"浙江",
              negative:1505,
          neuter:830,
          front:367
      },
      {
          name:"山东",
              negative:9505,
          neuter:8305,
          front:372
      },
      {
          name:"江苏",
              negative:1905,
          neuter:8305,
          front:672
      },
      {
          name:"四川",
              negative:9505,
          neuter:805,
          front:367
      }
  ],
        cloudData:[
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            },
            {
                name: 'Farrah Abraham',
                value: this.createRandomValue(),
                // 单独设置文本样式
                textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },
            }



        ],
        data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
        ],
    }
  }, //图表实例
  mounted() {
      this.echartsInit()
      this.echartsInit2()
  },
  methods: {
      createRandomItemStyle(){
          return 'rgb(' + [
              Math.round(Math.random()*180),
              Math.round(Math.random()*180),
              Math.round(Math.random()*360)
          ].join(',')+')'
      },
      createRandomValue(){
          return Math.round(Math.random()*1000)
      },
      echartsInit() {
          echarts.init(this.$refs.main).setOption({
              tooltip: {
                  trigger: "axis",
                  axisPointer: {
                      type: "shadow"
                  }
              },
              grid: {
                  show: true,
                  // left 组件离容器左侧的距离。
                  left: "20%",
                  // width 组件的宽度。默认自适应。
                  width: "80%",
                  height:'300px',
                  // backgroundColor:'rgba(208,77,77,0.8)',
                  //阴影
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                  shadowBlur: 10,
                  shadowOffsetX: 24
              },
              xAxis: {
                  type: 'category',
                  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                  type: 'value'
              },
              series: [{
                  data: [120, 200, 150, 80, 70, 110, 130],
                  type: 'bar',
                  showBackground: true,
                  backgroundStyle: {
                      color: 'rgba(220, 220, 220, 0.8)'
                  }
              }]
          })
      },
      echartsInit2() {
          this.$echarts.init(this.$refs.main2).setOption({
              tooltip: {
                  trigger: "axis",
                  axisPointer: {
                      type: "shadow"
                  }
              },
              // 是否显示直角坐标系网格。
              grid: {
                  show: true,
                  // left 组件离容器左侧的距离。
                  left: "20%",
                  // width 组件的宽度。默认自适应。
                  width: "80%",
                  height:'300px',
                  // backgroundColor:'rgba(208,77,77,0.8)',
                  //阴影
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                  shadowBlur: 10,
                  shadowOffsetX: 24
              },
              xAxis: {
                  boundaryGap: true,
                  type: 'category',
                  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                  type: 'value'
              },
              series: [{

                  itemStyle: {
                      normal: {
                          //这里是重点
                          color: 'blue'//柱状图颜色
                      }
                  },
                  data: [120, 200, 150, 80, 70, 110, 130],
                  type: 'bar',
                  showBackground: true,
                  backgroundStyle: {
                      color: 'rgba(220, 220, 220, 0.8)'
                  }
              }]
          })
      }
  }
}
</script>
<style scoped>
    .leftAside{
        position: fixed;
        left: 0;
        top: 0;
    }
    .rightContent{
        padding-left: 270px;
        background-color: #f6f4f4;
    }
    .content{
        padding: 6px 10px;
        overflow: hidden;
    }

/*    媒体渠道导航列表*/
    .mediaNav{
        width: 100%;
        margin-top: 14px;
    }
    .draws{
        display: flex;
        width: 100%;
        flex-wrap: wrap;
    }
    .draw{
        width: 50%;
        height: 400px;
    }
    .iconContent{
        box-sizing: border-box;
        margin-top: 10px;
        padding: 10px 14px;
        border: 1px solid #ccc;
        width: 100%;
        background-color: white;
    }
</style>
